<template>
  <div :ref="target"></div>
</template>

<script>
import WangEditor from "wangeditor"
export default {
  name: "PugEditor",
  props:{
    modelValue:String,
    target:{
      type:String,
      default:"div1"
    },
    placeholder:{
      type:String,
      default:"请输入正文内容..."
    },
    cheight:{
      type:Number,
      default:500
    }
  },
  data() {
    return {}
  },
  mounted() {
    var that = this;
    that.$nextTick(()=>{
      const editor = new WangEditor(this.$refs[this.target])
      // 设置编辑区域高度为 500px
      editor.config.zIndex = 0
      editor.config.height = this.cheight;
      this.uploadCallback(editor);
      editor.config.onchange = function(newHtml){
        that.$emit("update:modelValue",newHtml);
        that.$emit("change",newHtml);
      }
      // 默认情况下，显示所有菜单
      editor.config.menus = [
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        //'todo',
        'justify',
        'quote',
        'emoticon',
        'image',
        //'video',
        'table',
        'code',
        'splitLine',
        //'undo',
        //'redo',
      ]

      editor.create();
      setTimeout(()=>{
        editor.txt.html(this.modelValue || this.placeholder) // 重新设置编辑器内容
      },300);
    })


  },
  methods: {
    uploadCallback(editor){
      // 配置 server 接口地址
      editor.config.uploadImgServer = '/admin/v1/upload/oss/file'
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
      editor.config.withCredentials = true
      editor.config.uploadImgShowBase64 = true
      // 配置alt选项
      editor.config.showLinkImgAlt = false
      // 配置超链接
      editor.config.showLinkImgHref = false
      editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      editor.config.uploadImgMaxLength = 5 // 一次最多上传 5 个图片
      editor.config.uploadImgParams = {dir: this.target}
      editor.config.uploadFileName = 'file'
      editor.config.uploadImgHooks = {
        // 上传图片之前
        before: function(xhr) {
          console.log(xhr)
          // 可阻止图片上传
          return true;
        },
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
          console.log('success', xhr)
        },
        // 图片上传并返回了结果，但图片插入时出错了
        fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },
        // 上传图片出错，一般为 http 请求的错误
        error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        // 上传图片超时
        timeout: function(xhr) {
          console.log('timeout',xhr)
        },
        // 图片上传并返回了结果，想要自己把图片插入到编辑器中
        // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
        customInsert: function(insertImgFn, result) {
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.data.url)
        }
      }
    }
  }
}
</script>
